<route lang="json5" type="page">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view class="profile">
    <view class="merchant-info">
      <view class="avatar-section">
        <wd-img :src="avatar" width="120rpx" height="120rpx"></wd-img>
        <view class="info-text">
          <text class="name">{{ profileInfo.userinfo.username }}</text>
        </view>
      </view>
    </view>
    <wd-cell-group custom-class="m-3 rounded-2xl">
      <wd-cell icon="list" title="已送货订单" is-link to="/pages/index/index" />
      <wd-cell icon="setting" title="设置" is-link to="/pages/setting/setting"></wd-cell>
    </wd-cell-group>
  </view>
</template>

<script lang="ts" setup>
import { useProfileStore } from '@/store'
const profileStore = useProfileStore()

const { profileInfo } = profileStore

const avatar = computed(() => profileInfo.userinfo.avatar)

// 处理设置
const handleSettings = () => {
  uni.navigateTo({
    url: '/pages/setting/setting',
  })
}
</script>

<style lang="scss" scoped>
.profile {
  min-height: 100vh;
  padding-bottom: 40rpx;
  background-color: #f7f7f7;
}

.merchant-info {
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;

  .avatar-section {
    display: flex;
    // align-items: center;
    .info-text {
      margin-left: 30rpx;

      .name {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
  }
}

.icon-placeholder {
  width: 40rpx;
  height: 40rpx;
  background-color: #e93b3d;
  border-radius: 4rpx;
}

.icon-placeholder-small {
  width: 32rpx;
  height: 32rpx;
  background-color: #e93b3d;
  border-radius: 4rpx;
}
</style>
